<template>
	<div class="component-item" :class="active?'selected':''" v-if="moduleData">
		<div class="flex center preview-item-top">
			<div class="del" @click.stop="delModule">
				<Icon type="ios-trash" size='22' style="color: white;" />
			</div>
		</div>
        <div class="component-content">
        	<!-- 标题 -->
        	<div class="disFlex Flex-center Flex-middle">
                <div class="circle">
                    <div class="circleBg"></div>
                </div>
                <div class="component-title" style="margin: 0px 17px;">{{moduleData.label_name_cn}}</div>
                <div class="circle">
                    <div class="circleBg"></div>
                </div>
            </div>
            <div class="disFlex Flex-center Flex-middle component-desc">{{moduleData.label_info_summary}}</div>
            <div class="_content">
                <div class="_imgList disFlex Flex-center Flex-middle bgCover" :style="`background-image: url('${jtem.image_url}');`" v-for="(jtem,j) in moduleData.data" :key="'img'+j">
                    <div class="_text lineClamp l_1">{{jtem.title}}</div>
                    <div class="_bg" :style="`background-color:${jtem.rgba ? jtem.rgba : '#f2f2f2'}`"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  	name: 'ImageModule',		
	props: {
		/**
	     * @description 起始值，即动画开始前显示的数值
	     */
	    moduleData: {
	      type: Object,
	      default: null
	    },
	    active: {
	    	type: Boolean,
	    	default: false
	    }
	},
    data () {
        return {
        	curpage: 0
    	}
    },
    methods: {
    	delModule() {
			this.$emit("delModule",this.moduleData);		
    	}
    },
    created() {
    },
    components: {
	}
 }
</script>

<style scoped>	
@import url("../baseModule.less");

.circle {
	width: 8px;
    height: 8px;
    position: relative;
    top: 0;
    left: 0;
    background: #fd0;
    border-radius: 50%;
}
.circleBg {
	width: 8px;
    height: 8px;
    background: transparent;
    border: 1px solid #231916;
    box-sizing: border-box;
    border-radius: 50%;
    position: absolute;
    top: -1px;
    left: -1px;
}
._imgList{height: 115px;margin-bottom: 12px;border-radius: 5px;position: relative;overflow: hidden}
._imgList ._bg{width: 100%;height: 100%;background-color: rgba(0, 0, 0, .5);position: absolute;left: 0;top: 0;}
._imgList ._text{color:#f8f8f8;position:relative;z-index:10;font-size:22px;width: 100%;padding: 0 24px;line-height: 1.3;text-align: center}


</style>
